JavaScript programmers are talking a lot about callback hell. Callback hell is a concept that affects a JavaScript developer when he tries to perform various callbacks function one after the other. Some persons call it the pyramid of doom.
Using callbacks causes the program difficult to write and maintain. It also increases the problems of identifying the order flow, which is an obstacle when debugging, hence the famous name for this issue: Callback Hell.
For Example:
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
addition(2,function(addRes,err){ if(!err){ Subtract(addRes,function(subRes,err){ if(!err){ multiplication(subRes,function(mulRes,err){ console.log(mulRes); }); } }); } }); function addition(val,callback){ callback(val+5,false); } function Subtract(val,callback){ callback(val-3,false); } function multiplication(val,callback){ callback(val*5,false); } |
In the above code, there is three operation addition, Subtract and multiplication. Which is using a callback function to perform the task. But you can see the code, here I am using Subtract callback function under addition function and multiplication callback function under subtract function. The Above structure is known as the pyramid of doom as well as callback hell.
Techniques for avoiding callback hell
Handling callbacks hell using promises
Promises are an option to callbacks when interacting with asynchronous code. Promises return the result value or an exception to a mistake. The heart of the promises is the.then() function, which waits for returning the promise object. The.then() function requires two optional functions as arguments and only one will ever be called depending on the state of the promise. The first method is called when the promise is fulfilled. When the promise is rejected, the second function is called.
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var promise = new Promise(function(resolve,reject){ resolve(2); }); promise.then(addition).then(Subtract).then(multiplication).then((msg)=>{ console.log('output: '+msg ); }).catch((err)=>{ console.log(err); }); function addition(val){ return (val+5); } function Subtract(val){ return (val-3); } function multiplication(val){ return (val*5); } |
Promises can be chained inside or outside the handler.then() function. Chaining promises outside the handle are very clean and simple to read, but if we want to use some parameters in our next handler that are accessible in the previous handler’s scope, we may have to chain promises inside the handler.
Conclusion:
Getting rid of Callback Hell is not easy if you don’t follow correct coding rules and carry self-audits to your own codes. By using techniques above, however, it can be avoided.
Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co
